<template>
  <!--  上面可以提供一个轮播图 到时候再修改-->
  <span style="text-align: center;color: #24dcf3;font-size: 40px"  >专馆</span>
  <div class="recent">

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :stretch="true" >
      <el-tab-pane label="工艺美术博物馆" name="first">
        <!--        混合内容展示-->
        <div class="exhibitionCard">
          <el-card class="box-card"  v-for="item in firstData" :key="item">
            <!--            显示馆区-->
            <!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
            <!--            得有一个显示:更多 的功能-->
            <div class="DataLi">
              <img :src="item.url" >
              <div>{{item.name}}</div>
<!--              <div>{{item.id}}</div>-->
            </div>
            <div>
              <el-button type="success" @click="$router.push('/museumDetail?id=' + item.id)">在线浏览</el-button>
            </div>
          </el-card>
        </div>

      </el-tab-pane>
      <!--      读取近期展览内容-->
      <el-tab-pane label="中国刀剪剑博物馆" name="second">
        <div class="exhibitionCard">
          <el-card class="box-card"  v-for="item in secondData" :key="item">
            <!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
            <!--            得有一个显示:更多 的功能-->
            <div class="DataLi">
              <img :src="item.url">

              <div>{{item.name}}</div>
<!--              <div>{{item.id}}</div>-->
            </div>
            <div>
              <!--              <span>在线预订</span>-->
              <el-button type="success" @click="$router.push('/museumDetail?id=' + item.id)">在线浏览</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="中国扇博物馆" name="third">
        <div class="exhibitionCard">
          <el-card class="box-card"  v-for="item in thirdData" :key="item">
            <!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
            <!--            得有一个显示:更多 的功能-->
            <div class="DataLi">
              <img :src="item.url" >
              <div>{{item.name}}</div>
<!--              <div>{{item.id}}</div>-->
            </div>
            <div>
              <el-button type="success" @click="$router.push('/museumDetail?id=' + item.id)">在线浏览</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="中国伞博物馆" name="fourth">
        <div class="exhibitionCard">
          <el-card class="box-card"  v-for="item in fourthData" :key="item">
            <div class="DataLi">
              <img class="image" :src="item.url" >
              <div>{{item.name}}</div>
            </div>
            <div>
              <!--              <span>在线预订</span>-->
              <el-button type="success" @click="$router.push('/museumDetail?id=' + item.id)">在线浏览</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--   更多 这个功能显示的位置不对-->
    <!--    <el-button type="primary"> 更多</el-button>-->

  </div>
</template>

<script setup>
import { onMounted,ref ,reactive,} from 'vue'
// import type { TabsPaneContext } from 'element-plus'
import request from "../../../../front_admin/src/utils/request";
const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}

//立即响应的空数组
const firstData = ref([])
const secondData = ref([])
const thirdData = ref([])
const fourthData = ref([])

const onload=()=>{
  request.get('/collectionstype/page',{
    params:{
      pageNum: 1,
      pageSize: 16,
      title: ''
    }
  }).then(res => {
    if(res.code === '200') {
      // this.tableData = res.data.list
      // this.total = res.data.total
      let exhibitionList = res.data.list
      exhibitionList.map((item) => {
        //图片显示还存在问题
        // console.log("item内容是",item)
        if(85<= item.id && item.id<=90 ){
          firstData.value.push({name:item.name,url:item.cover,id:item.id})
        }

        if((38<=item.id && item.id<=67) || (144<=item.id&&item.id<=146)){
          secondData.value.push({name:item.name,url:item.cover,id:item.id})
        }

        if(71<=item.id && item.id <=74){
          thirdData.value.push({name:item.name,url:item.cover,id:item.id})
        }

        if(item.id == 84){
          fourthData.value.push({name:item.name,url:item.cover,id:item.id})
        }

      })
      // console.log(this.params)
    }

  })


}
onMounted(()=>{
  onload()
})


</script>

<style scoped>
.recent{
  width:90%;
  margin:15px auto;
  display: flex;
  justify-content: center;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.exhibitionCard{
  display: flex;
  float: left;

  flex-wrap: wrap;
  width: 1000px;
}
.box-card{
  width: 32%;
  /*padding: 10px;*/
  margin-bottom: 15px;
  margin-right: 10px;
}

.DataLi img{
  width: 250px;
  height: 250px;
}


</style>